<template>
	<view>
		<view class="content" v-for="item in listData" :key="item.id" @click="handleClick(item)">
			<view class="pic">
				<view class="img">
					<image :src="item.thumb"></image>
				</view>
			</view>
			<view class="cours">
				<view class="tit">
					{{item.short_description}}
				</view>
				<view class="icon">
					<uni-icons color="#999" type="person" size="16"></uni-icons>
					<text>32</text>
					<uni-icons color="#999" class="iconfont" type="compose" size="16"></uni-icons>
					<text>{{item.user_count}}</text>
				</view>
				<view class="price">

					<text>￥{{item.charge}}</text>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			listData:{
				type:Array,
				required:true
			}
		},
	methods:{
		handleClick(item){
			this.$emit('myList',item)
		}
	}
	}
</script>

<style lang="less" scoped>
	.content{
		height: 200rpx;
		display: flex;
		.pic{
			display: flex;
			align-items: center;
			.img{
				width: 180rpx;
				height: 180rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.cours{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 20rpx;
			padding: 10px 0;
			.tit{
				font-size: 26rpx;
				font-weight: 700;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				
			}
			.icon{
				font-size: 20rpx;
				color: #999;
				.iconfont{
					margin-left:20rpx ;
				}
			}
			.price{
				border-radius: 50rpx;
				color: red;
				text{
					border-radius: 50rpx;
					background-color: #eeeeee;
					padding: 0 30rpx;
				}
			}
		}
	}
</style>
